<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="plugins/element-ui/index.css"/>
    <link rel="stylesheet" href="styles/icon/iconfont.css"/>
    <style>
        .el-header {
            background-color: #B3C0D1;
            color: #333;
            line-height: 60px;
        }

        .el-aside {
            color: #333;
        }
    </style>
</head>
<body>
<div id="app">

    <el-container style="height: 500px; border: 1px solid #eee">
        <el-aside width="200px" style="background-color: rgb(238, 241, 246)">
            <el-menu :default-openeds="['1']">
                <el-submenu index="1">
                    <template slot="title"><i class="el-icon-menu"></i>博客管理</template>
                    <el-menu-item-group>
                        <template slot="title">博客分类管理</template>
                        <el-menu-item index="2-1">分类列表</el-menu-item>
                    </el-menu-item-group>
                    <el-menu-item-group title="博客管理">
                        <el-menu-item index="2-3">博客列表</el-menu-item>
                    </el-menu-item-group>
                </el-submenu>
            </el-menu>
        </el-aside>

        <el-container>
            <el-header style="text-align: right; font-size: 12px">
                <el-dropdown>
                    <i class="el-icon-setting" style="margin-right: 15px"></i>
                    <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item>新增</el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown>
                <span>王小虎</span>
            </el-header>

            <el-main>

                <el-row>
                    <el-button type="success" @click="openForm">新增</el-button>
                </el-row>

                <el-table
                        :data="tableData"
                        style="width: 100%">
                    <el-table-column
                            prop="blogId"
                            label="id"
                            width="180">
                    </el-table-column>
                    <el-table-column
                            prop="title"
                            label="标题"
                            width="180">
                    </el-table-column>
                    <el-table-column
                            prop="categoryName"
                            label="分类名"
                            width="180">
                    </el-table-column>
                    <el-table-column
                            prop="author"
                            label="作者"
                            width="180">
                    </el-table-column>

                    <el-table-column
                            label="操作">
                        <template slot-scope="scope">

                            <el-row>
                                <el-button type="primary" icon="el-icon-edit" circle
                                           @click="edit(scope.row)">
                                </el-button>
                                <!--  row->获取整行数据 -->
                                <el-button type="danger" icon="el-icon-delete" circle
                                           @click="del(scope.row)">
                                </el-button>
                            </el-row>

                        </template>
                    </el-table-column>

                </el-table>
            </el-main>


            <!--新增博客-->
            <el-dialog
                    title="新增博客"
                    :visible.sync="dialogVisible"
                    width="30%"
            >
                <!--新增博客表单-->
                <el-form ref="form" :model="form" label-width="80px">
                    <el-form-item label="标题">
                        <el-input v-model="form.title"></el-input>
                    </el-form-item>
                    <!--下拉框-->
                    <el-form-item label="分类">
                        <el-select v-model="form.categoryId" placeholder="请选择分类">
                            <el-option
                                v-for="item in categories"
                                :key="item.categoryId"
                                :label="item.categoryName"
                                :value="item.categoryId">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="作者">
                        <el-input v-model="form.author"></el-input>
                    </el-form-item>
                    <el-form-item label="内容">
                        <el-input type="textarea" v-model="form.content"></el-input>
                    </el-form-item>
                </el-form>
                <span slot="footer" class="dialog-footer">
                   <el-button @click="dialogVisible = false">取 消</el-button>
                   <el-button type="primary" @click="add">确 定</el-button>
                </span>
            </el-dialog>

            <!--修改博客-->
            <el-dialog
                    title="修改博客"
                    :visible.sync="dialogVisible2"
                    width="30%"
            >
                <!--修改博客表单-->
                <el-form ref="form" :model="form" label-width="80px">
                    <el-form-item label="标题">
                        <el-input v-model="form.title"></el-input>
                    </el-form-item>
                    <!--下拉框-->
                    <el-form-item label="分类">
                        <el-select v-model="form.categoryId" placeholder="请选择分类">
                            <el-option
                                    v-for="item in categories"
                                    :key="item.categoryId"
                                    :label="item.categoryName"
                                    :value="item.categoryId">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="作者">
                        <el-input v-model="form.author"></el-input>
                    </el-form-item>
                    <el-form-item label="内容">
                        <el-input type="textarea" v-model="form.content"></el-input>
                    </el-form-item>
                </el-form>
                <span slot="footer" class="dialog-footer">
                   <el-button @click="dialogVisible2 = false">取 消</el-button>
                   <el-button type="primary" @click="muUpdate">确 定</el-button>
                </span>
            </el-dialog>

            <!--            <el-dialog-->
<!--                    title="修改分类"-->
<!--                    :visible.sync="dialogVisible2"-->
<!--                    width="30%"-->
<!--            >-->
<!--                <el-form>-->
<!--                    <el-form-item label="修改博客">-->
<!--                        &lt;!&ndash;placeholder&#45;&#45;&#45;&#45;文本框内的默认提示内容，文本框内输入内容就会消失&ndash;&gt;-->
<!--                        <el-input v-model="name" placeholder="分类名称不能超过20个字"></el-input>-->
<!--                    </el-form-item>-->
<!--                </el-form>-->
<!--                <span slot="footer" class="dialog-footer">-->
<!--                   <el-button @click="dialogVisible2 = false">取 消</el-button>-->
<!--                   <el-button type="primary" @click="myUpdate">确 定</el-button>-->
<!--                </span>-->
<!--            </el-dialog>-->

        </el-container>
    </el-container>
</div>

</body>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="plugins/vue/vue.js"></script>
<!-- 引入组件库 -->
<script src="plugins/element-ui/index.js"></script>
<!-- 引入axios -->
<script src="plugins/axios/axios.min.js"></script>
<!--对axios封装-->
<script src="js/request.js"></script>
<!--导入具体的api-->
<script src="api/blog.js"></script>
<script src="api/category.js"></script>

<script>
    new Vue({
        el: '#app',
        data() {
            return {
                tableData: [],
                categories:[],
                dialogVisible: false,
                dialogVisible2: false,
                form: {
                    title:'',
                    categoryId:'',
                    author:'',
                    content:''
                }
            }
        },
        //加载完页面执行一次
        mounted() {
            this._getBlogs()
        },
        methods: {
            openForm(){
                this.dialogVisible=true;
                //0.发起请求获取所有的分类
                this._getCategories()
                //清除表单内容
                this.form={}
            },
            add(){
                //1.发起请求
                addBlog(this.form).then(res=>{
                    //2.处理返回
                    console.log(res)
                    //3.发起弹窗
                    this.$message({
                        message:res.data.msg,
                        type:'success'
                    })
                    //4.刷新页面
                    this._getBlogs()
                    //5.表单关闭
                    this.dialogVisible = false
                })
            },
            edit(row){
                console.log("blogId="+row.blogId)
                //显示弹窗
                this.dialogVisible2=true
                //请求获取所有的分类，用来填充下拉框
                this._getCategories()
                //请求数据
                this._getBlogById(row.blogId)


            },
            muUpdate(){
                updateBlog(this.form).then(res=>{
                    console.log(res)
                    if (res.data.flag){
                        //刷新数据
                        this._getBlogs()
                        //关闭弹窗
                        this.dialogVisible2=false
                    }
                })
            },
            del(row){
                this.$confirm('此操作将永久删除, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    // console.log("删除")
                    //真正的删除动作
                    deleteBlog(row.blogId).then(res=>{
                        console.log(res)
                        if (res.data.flag){
                            //提示信息
                            this.$message({
                                type: 'success',
                                message: '删除成功!'
                            });
                            //刷新数据
                            this._getBlogs()
                        }else{
                            this.$message({
                                type: 'info',
                                message: '已取消删除'
                            });
                        }
                    })
                })
                console.log("blogId="+row.blogId)
            },
            _getBlogs(){
                getAllBlogs().then(res=>{
                    console.log(res)
                    if (res.data.flag){
                        //拿后端返回的数据来更新上面的tableData
                        this.tableData = res.data.data
                    }
                })
            },
            _getCategories(){
            getAllCategories().then(res=>{
                console.log(res)
                if (res.data.flag){
                    //拿后端返回的数据来更新上面的categories
                    this.categories=res.data.data
                }
            })
        },
            _getBlogById(id){
                findBlogById(id).then(res=>{
                    console.log(res)
                    if (res.data.flag){
                        //绑定数据
                        this.form=res.data.data
                        //详细的为下面内容
                        // this.form.title=res.data.data.title
                        // this.form.categoryId=res.data.data.categoryId
                        // this.form.author=res.data.data.author
                        // this.form.content=res.data.data.content
                    }
                })
            }
        }
    })
</script>

</html>